<template>
  <el-form ref="form" :rules="rules" :model="currentContent" label-width="100px" class="demo-form">
    <el-row>
      <el-col>
        <el-card class="box-card">
          <el-form-item label="标题" prop="title">
            <el-input v-model="currentContent.title"></el-input>
          </el-form-item>
          <el-form-item label="封面图" prop="cover">
            <image-uploader v-model="currentContent.cover" :max-size="10240" :width="200" :height="200"></image-uploader>
          </el-form-item>
          <el-form-item label="活动时间" prop="startAndEndTime">
            <el-date-picker
              v-model="currentContent.startAndEndTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="活动开始日期"
              end-placeholder="活动截至日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <!--<editor v-model="currentContent.content" height="300px"></editor>-->
            <u-editor v-model="currentContent.content" ></u-editor>
          </el-form-item>
          <el-form-item>
            <span style="float: right;">
                <el-button type="primary"  @click="save('form')">保存</el-button>
                <el-button @click="back">返回</el-button>
            </span>
          </el-form-item>

        </el-card>
      </el-col>
    </el-row>

  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import Editor from "@/components/editor";
import UEditor from "@/components/u-editor";
import ImageUploader from "@/components/image-uploader";
import Moment from "moment";
export default {
  props: {
    isClose: Boolean
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters({
      currentContent: "currentContent",
      uploadImgAttr: "uploadImgAttr"
    })
  },
  data() {
    return {
      value4: [],
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        startAndEndTime: [
          { required: true, message: "请选择活动时间", trigger: "blur" }
        ],
        cover: [{ required: true, message: "请上传缩略图", trigger: "blur" }]
      }
    };
  },
  methods: {
    save(formName, status) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.currentContent.startTime = "";
          this.currentContent.endTime = "";
          if (
            this.currentContent.startAndEndTime &&
            this.currentContent.startAndEndTime.length > 0
          ) {
            this.currentContent.startTime = Moment(
              this.currentContent.startAndEndTime[0]
            ).format("YYYY-MM-DD HH:mm:ss");
            this.currentContent.endTime = Moment(
              this.currentContent.startAndEndTime[1]
            ).format("YYYY-MM-DD HH:mm:ss");
          }
          this.$store
            .dispatch("addOrUpdateContentS", this.currentContent)
            .then(ret => {
              this.$notify({
                title: "添加成功",
                type: "success"
              });
              this.back();
            });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    }
  },
  components: { Editor, ImageUploader, UEditor }
};
</script>
<style>
</style>
